<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<block v-if="store.is_author_close == 10">
			<!-- 发布作品：名称、价格、描述、图片、库存、状态（上架、下架） -->
			<view class="form">
				<view class="item">
					<u--input v-model="form.title" placeholder="请输入作品名称" border="surround"></u--input>
				</view>
				<view class="item">
					<view class="label">作品图</view>
					<view class="value">
						<u-upload :fileList="cover" @afterRead="afterRead" @delete="deletePic" name="cover"
							:multiple="false" :maxCount="1"></u-upload>
					</view>
				</view>
				<view class="item">
					<u--input v-model="form.price" placeholder="请输入作品价格" border="surround"></u--input>
				</view>
				<view class="item">
					<u--textarea v-model="form.remarks" placeholder="请输入作品描述" border="surround" :count="true">
					</u--textarea>
				</view>
				<view class="item">
					<u--textarea v-model="form.code" maxlength="-1" placeholder="请输入作品序列号,使用换行分割" border="surround"
						:count="true"></u--textarea>
				</view>
				<view class="item">
					<u--input v-model="form.stock" placeholder="请输入作品库存" border="surround"></u--input>
				</view>
				<view class="item">
					<view class="label">状态</view>
					<view class="value">
						<u-radio-group placement="row" v-model="form.state">
							<view class="radio">
								<u-radio label="上架" name="10">
								</u-radio>
							</view>
							<view class="radio">
								<u-radio label="下架" name="20">
								</u-radio>
							</view>
						</u-radio-group>
					</view>
				</view>
				<view class="item">
					<view class="submit" v-if="form.opus_id" @click="onSave">
						<u-button shape="circle" color="linear-gradient(to right,#fa3534,#fa3534)" text="更新作品信息">
						</u-button>
					</view>
					<view class="submit" v-if="!form.opus_id" @click="onSubmit">
						<u-button shape="circle" color="linear-gradient(to right,#fa3534,#fa3534)" text="立即发布">
						</u-button>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<u-empty mode="data" text="暂无更多作品~!" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</block>
	</view>
</template>

<script>
	import {
		upload,
		config
	} from '@/api/system.js';
	import {
		created,
		detail,
		modify
	} from '@/api/author/opus.js';
	export default {
		data() {
			return {
				form: {
					title: '',
					image_id: '',
					price: '',
					remarks: '',
					code: '',
					stock: '',
					state: '10'
				},
				cover: [],
				store: {}
			};
		},
		onLoad(options) {
			this.opus_id = options.opus_id
			if (this.opus_id) {
				this.getOpus()
			}
			this.getStore()
		},
		methods: {
			getStore() {
				config({
					key: 'store'
				}).then(res => {
					this.store = res.data.config
				}).catch(err => {

				})
			},
			getOpus() {
				detail({
					opus_id: this.opus_id
				}).then(res => {
					let opus = res.data.opus
					this.form.title = opus.title
					this.form.opus_id = opus.opus_id
					this.form.image_id = opus.image_id
					this.form.price = opus.price
					this.form.remarks = opus.remarks
					this.form.code = opus.code
					this.form.stock = opus.stock
					this.form.title = opus.title
					this.form.state = opus.state + ''
					this.cover = [{
						url: opus.image.file_path
					}];
				}).catch(err => {

				})
			},
			onSubmit() {
				created(this.form).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							message: res.msg,
							complete() {
								uni.navigateBack()
							}
						})
					}
				}).catch(err => {

				})
			},
			onSave() {
				modify(this.form).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							message: res.msg,
							complete() {
								uni.navigateBack()
							}
						})
					}
				}).catch(err => {

				})
			},
			deletePic() {
				this.cover = [];
				this.form.image_id = '';
			},
			async afterRead(event) {
				console.log(event)
				let lists = [].concat(event.file);
				let result = await upload({
					file: event.file.url
				}).then(result => {
					return result;
				}).catch(err => {

				})
				if (event.name == 'cover') {
					this.cover = [{
						url: event.file.url
					}];
					this.form.image_id = result.file_id;
				}
			}
		}
	}
</script>

<style lang="scss">
	.form {
		width: 86%;
		margin: 15rpx auto;
		min-height: 320rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 15rpx 30rpx;

		.item {
			margin: 30rpx 0rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.submit {
				width: 94%;
				margin: 0 auto;
			}

			.value {
				.radio {
					margin-right: 15rpx;
				}
			}

			.label {
				min-width: 100rpx;
				margin-right: 15rpx;
			}
		}
	}
</style>
